import { Button, Input, Select } from "antd";
import React, { useEffect } from "react";
import UpdatePassword from "./UpdatePassword";
import Exchange from "./Exchange";
import { useCounter } from "@/model/context";
import { getUser } from "@/service";

export default function UserInfo() {
  const { state: { serverId, serverName, serverList } } = useCounter();
  const [userInfo, setUserInfo] = React.useState<any>(12);
  const [userName, setUserName] = React.useState<any>(12);
  const [steamId, setSteamId] = React.useState<any>(12);
  const [empiricalVal, setempiricalVal] = React.useState<any>(12);
  const [levelName, setlevelName] = React.useState<any>(12);

  const [chips, setChips] = React.useState<any>(12);
  const [password, setPassword] = React.useState<any>(21);

  const [open, setOpen] = React.useState(false)
  const changePassword = () => {
    // 修改密码
    setOpen(true)
  };

  const [exchangeOpen, setExchangeOpen] = React.useState(false)
  const [exchangeCode, setExchangeCode] = React.useState<any>(null)
  const exchangeClick = (code: string) => {
    setExchangeCode(code)
    setExchangeOpen(true)
  }

  useEffect(() => {
    if (serverId) {
      getUserInfo()
    }
  }, [serverId])

  const getUserInfo = async () => {
    const res = await getUser({serverId})
    setUserInfo(res?.user?.username)
    setUserName(res?.user?.username)
    setSteamId(res?.user?.steamId)
    setempiricalVal(res?.user?.empiricalVal)
    setChips(res?.num)
    setlevelName(res?.levelName)

    // setPassword()
  }

  return (
    <>
      <div className="userInfo">
        <div className="title">用户信息 </div>
        <div className="content">
          <div className="item">
            <span>steamId:</span>
            <Input disabled value={steamId} />
          </div>
          <div className="item">
            <span>玩家名称:</span>
            <Input disabled value={userName} />
          </div>
          <div className="item">
            <span>等级:</span>
            <Input disabled value={levelName} />
          </div>
          <div className="item">
            <span>经验值:</span>
            <Input disabled value={empiricalVal} />
          </div>

          <div className="item">
            <span>当前服务器:</span>
            <Input disabled value={serverName != "所有服务器" ? serverName : ""}
 />
          </div>
          <div className="item">
            <span>便便数量:</span>
            <Input disabled value={chips} />
          </div>
          {/* <div className="item">
            <span className="name">密码:</span>
            <Input.Password disabled value={password} />
            <Button type="primary" onClick={changePassword}>
              修改密码
            </Button>
          </div> */}
          <div className="item buttonGroup">
            <Button type="primary" onClick={() => exchangeClick("chips")}>存入便便</Button>
            <Button type="primary" onClick={() => exchangeClick("goods")}>提取便便</Button>
            <Button type="primary" onClick={changePassword}>
              修改密码
            </Button>
          </div>
        </div>
      </div>
      <UpdatePassword open={open} close={() => setOpen(false)} />
      <Exchange getUserInfo={getUserInfo} open={exchangeOpen} close={() => setExchangeOpen(false)} code={exchangeCode} chips={chips} />
    </>
  );
}
